<!--感兴趣的岗位-->
<!--父级页面:所有页面(除登录页)共有的左侧与顶部条-->
<template>
  <div class="page-container">
    <el-header class="fixed-header">
      <el-menu>
        <!-- 顶部条的菜单栏  -->
        <el-row style="padding-top:10px;">
          <el-col :span="2"></el-col>
          <el-col :span="1" style="display: flex; justify-content: center;padding-bottom: 15px;">
            <!-- <el-avatar>是把图片裁成圆的 -->
            <el-avatar src="/imgs/home/logo.png" style="width: 35px; height: 35px;"></el-avatar>
          </el-col>
          <el-col :span="2" style="color: #000; justify-content: center; font-weight: bold; text-align: center; display: flex; align-items: center;padding-bottom: 15px;">
            <span style="text-align: center">招财蛙</span>
          </el-col>
          <el-col :span="6" style="display: flex; justify-content: center;">
            <span @click="router.push('/resumeList')" class="menu-link">我的简历</span>
            <span @click="router.push('/candidateRecords')" class="menu-link">我的招聘</span>
            <apan @click="router.push('interestedJobs')" class="menu-link">感兴趣岗位</apan>
          </el-col>


          <el-col :span="6" padding-right="100px" style="color: #000; justify-content: center; font-weight: bold; text-align: center; display: flex; align-items: center;padding-bottom: 15px;">
            <el-dropdown trigger="click" style="position:absolute;right:20px;">
              <span style="font-size:19px;font-weight:bold;">
                艾薇儿
                <el-icon><arrow-down/></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>


        </el-row>
      </el-menu>
    </el-header>
    <!--可滚动区域      -->
    <div class="scroll-container">
      <el-main style="padding: 20px;">
        <div style="width: 100vw">
          <img src="/imgs/home/picture.png" style="width: 100%; height: 310px;">
        </div>
        <el-row style="margin-top: 1%;height: 20%" justify="center">
          <el-col :span="12" style="margin-right: 1%;">
            <!-- 简历卡片列表 -->
            <el-card v-for="resume in resumeinfo" style="margin-top: 1%">
              <el-row style="height: 60%;text-align: left">
                <el-col :span="4" style="display: flex;justify-content: flex-end;align-items: center;">
                  <div class="company-logo">
                    <img :src="baseUrl+resume.photoImgUrl" style=" width: 100%;height: 100%;object-fit: cover;">
                  </div>
                </el-col>
                <el-col :span="16" style="text-align: left;margin-left: 10px">
                  <h1>{{ resume.name }}</h1>
                  <p>{{ resume.gender }}|大专|9年工作经验</p>
                  <p>杭州拱墅区中国（杭州）智慧信息产业园</p>
                </el-col>
                <el-col :span="3" style="text-align: left">
                  <h1>200W</h1>
                  <p>简历定价</p>
                </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row :gutter="20" style="text-align: left" justify="space-between">
                <el-col :span="12">
                  <el-tag type="primary">2018年11月24日</el-tag>
                  <span style="margin-left: 10px">更新时间</span>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                  <el-button type="info" @click="edit(resume.id)">编辑</el-button>
                  <el-button type="primary" @click="showResumeInfo(resume.id)">浏览</el-button>
                </el-col>
              </el-row>
            </el-card>


          </el-col>

          <!-- 右侧用户信息 -->
          <el-col :span="5">
            <el-card>
              <div class="user-info">
                <img src="../../assets/touxiang/aiweier.png" alt="用户头像" class="user-avatar">
                <h1>艾薇儿 <el-tag  type="danger" class="unverified" @click="router.push('/verification')">未实名</el-tag></h1>
                <el-button type="primary" block style="width: 200px;margin-top: 20px">我的简历</el-button>
                <br>
                <el-button type="info" block style="width: 200px;margin-top: 20px">我的招聘</el-button>
                <el-button  block style="width: 200px;margin-left: 0;margin-top: 20px;" @click="createNewResume">新建简历</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
      <el-footer class="custom-footer" style="background: #f5f7fa" padding="20px">
        <el-row :gutter="20">
          <!-- 用户帮助区块 -->
          <el-col :xs="24" :sm="8" :md="8" class="footer-section">
            <div class="footer-title">用户帮助</div>
            <ul class="help-list">
              <!-- 使用数据驱动方式渲染帮助链接 -->
              <li v-for="(item, index) in helpLinks" :key="index">
                <el-link :href="item.url" type="info">{{ item.title }}</el-link>
              </li>
            </ul>
          </el-col>

          <!-- 联系方式区块 -->
          <el-col :xs="24" :sm="8" :md="8" class="footer-section">
            <div class="footer-title">联系我们</div>
            <div class="contact-info">
              <p>📞 客服电话：{{ contactInfo.phone }}</p>
              <p>📧 企业邮箱：
                <el-link :href="`mailto:${contactInfo.email}`" type="info">
                  {{ contactInfo.email }}
                </el-link>
              </p>
              <p>📍 公司地址：{{ contactInfo.address }}</p>
            </div>
          </el-col>

          <!-- 二维码区块 -->
          <el-col :xs="24" :sm="8" :md="8" class="footer-section qr-codes">
            <div class="footer-title">关注我们</div>
            <el-row :gutter="10">
              <el-col
                  v-for="(qr, index) in qrCodes"
                  :key="index"
                  :span="12"
                  class="qr-item"
              >
                <img :src="qr.image" :alt="qr.title" class="qr-image">
                <p class="qr-desc">{{ qr.title }}</p>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <!-- 版权信息 -->
        <div class="copyright">
          <hr class="footer-divider">
          <p>© 2023 Your Company. All rights reserved. | 备案号：京ICP备12345678号</p>
        </div>
      </el-footer>

    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";
import { useStore } from 'vuex';
import store from "@/store";

const resumeinfo = ref([]);  // 初始化为数组，
const baseUrl = "http://localhost:9093/";
const userId=ref({
  userId:'1'
})
const loadResumeInfo = () => {
  const store=useStore();
  axios.get('http://localhost:9093/v1/resume/select', {
    params: {
      userId: userId.value.userId
    }
  })
      .then(response => {
        if(response.data.state === 200) {
          // 确保这里访问的是正确的数据路径
          resumeinfo.value = response.data.data;
          console.log('获取的简历数据列表：', resumeinfo.value)
          store.commit('SET_RESUME_DATA', resumeinfo.value);
          console.log('数据已保存到 Vuex:', store.state.resumeData);
          console.log('Received data:', resumeinfo.value);
        } else {
          ElMessage.error(response.data.message);
        }
      })
      .catch(error => {
        console.error('Request failed:', error);
        ElMessage.error('请求失败');
      });
}

const showResumeInfo=(resumeId)=>{
  const currentResume = resumeinfo.value.find(item => item.id === resumeId)
  if (currentResume) {
    // 存入Vuex
    store.commit('SET_CURRENT_RESUME_INFO', currentResume)
    console.log('当前简历数据已保存到 Vuex:', store.state.currentResume);
    // 跳转到详情页
    router.push('/resume')
  } else {
    console.error('未找到对应简历')
  }

}
const createNewResume = () => {
  // 清空 Vuex 中保存的 currentResume
  store.commit('SET_CURRENT_RESUME_INFO', {});
  // 跳转到编辑页
  router.push('/editResume');
};

const edit=(resumeId)=>{
  const currentResume = resumeinfo.value.find(item => item.id === resumeId)
  if (currentResume) {
    // 存入Vuex
    store.commit('SET_CURRENT_RESUME_INFO', currentResume)
    console.log('当前简历数据已保存到 Vuex:', store.state.currentResume);
    // 跳转到详情页
    router.push('/editResume')
  } else {
    console.error('未找到对应简历')
  }
}
onMounted(()=>{
  loadResumeInfo();
})
// 数据部分
const helpLinks = ref([
  { title: '常见问题', url: '/faq' },
  { title: '用户协议', url: '/terms' },
  { title: '隐私政策', url: '/privacy' },
  { title: '售后服务', url: '/support' }
])
const contactInfo = ref(
    {phone: '400-123-4567',
      email: 'support@yourcompany.com',
      address: '北京市朝阳区科技大厦12层'}
);
const qrCodes = ref([      {
  title: '微信公众号',
  image: new URL('@/assets/qr-wechat.png', import.meta.url).href
  // image: require('@/assets/qr-wechat.png')
},
  {
    title: '小程序码',
    image: new URL('@/assets/qr-miniprogram.png', import.meta.url).href
    // image: require('@/assets/qr-miniprogram.png')
  }
])
// 加载退出登录的方法
const logout = ()=>{
  if(confirm('您确认要退出登录吗?')){
    //清空登录时存入的当前用户的信息
    localStorage.removeItem('user');
    //退出后返回到登录页
    window.location.href = '/login';
    //也需要将刚刚取出来的user对象清空
    user.value = '';
  }
}

</script>
<style scoped>
.menu-link {
  color:  #000;
  font-weight: bold;
  margin-right: 10px;
  text-decoration: none;
  padding-top: 8px;
  padding-left:60px;
}
/* 关键样式 */
.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.fixed-header {
  position: fixed !important; /* 固定定位 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* 确保在最上层 */
  background: white; /* 添加背景色避免透明 */
  box-shadow: 0 2px 12px rgba(0,0,0,0.1); /* 可选：添加阴影增强层次感 */
}

.scroll-container {
  flex: 1;
  overflow-y: auto;
  margin-top: 60px; /* 需要等于 header 高度 */
}

/* 样式部分 */
.custom-footer {
  position: static !important; /* 关闭固定定位 */
  background-color: #f8f9fa;
  padding: 40px 20px;
  color: #666;
}

.footer-section {
  margin-bottom: 30px;
  padding: 0 20px;
}

.footer-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  font-weight: bold;
  padding-left: 10px;
  border-left: 4px solid #409EFF; /* 左侧装饰线 */
}

.help-list {
  list-style: none;
  padding-left: 0;
}

.help-list li {
  margin-bottom: 10px;
}

.contact-info p {
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.qr-codes {
  text-align: center;
}

.qr-image {
  width: 120px;
  height: 120px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  background: white;
}

.qr-desc {
  margin-top: 8px;
  font-size: 12px;
  color: #999;
}

.copyright {
  text-align: center;
  margin-top: 40px;
  font-size: 12px;
  color: #999;
}

.footer-divider {
  border: 0;
  border-top: 1px solid #e4e7ed;
  margin: 20px 0;
}

</style>

